<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu router :default-active="$route.path" class="el-menu-vertical-demo">
                    <!-- 递归渲染菜单项 -->
                    <MyMenu v-for="menu in menus" :key="menu.id" :menu="menu"></MyMenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
// 导入菜单组件
import MyMenu from '@/components/MyMenu.vue';
// 导入获取菜单的API
import { getMenuAPI } from '@/api';
// 导入菜单数据的类型
import type { MenuData } from '@/types';
// 导入ref、onMounted函数
import { ref, onMounted } from 'vue'
// 定义变量存储菜单数据
let menus = ref([] as MenuData[])
// 组件挂载后获取菜单数据
onMounted(async () => {
    let res = await getMenuAPI()
    menus.value = res.data
    // console.log(menus.value)
})
</script>

<style scoped></style>